<template>
  <div class="box">
    <!-- 头部搜索 -->
    <div class="header">
      <el-form :model="form" :inline="true" class="demo-form-inline">
        <el-form-item label="商品类型搜索：">
          <el-input v-model="form.className" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="background-color: #5f84ff"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主体部分 -->
    <div class="body">
      <!-- 新建按钮 -->
      <el-button
        plain
        style="
          background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
          color: #fff"
        class="el-icon-circle-plus-outline"
        @click="openPublic('add')"
      >
        新建</el-button>

      <!-- Table表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="150"
        />

        <el-table-column prop="className" label="商品类型名称" width="700" />
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="openPublic('edit',row)">修改</el-button>
            <el-button
              type="text"
              style="color:red"
              @click="del(row.classId)"
            >删除</el-button>
          </template>
        </el-table-column></el-table>

      <!-- 分页 -->
      <div v-if="totalPage >= 1" class="com_pagination">
        <div class="left">
          <span style="font-size: 16px; color: #dbdfe5">共{{ totalCount }}条记录</span>
          <span style="font-size: 16px; color: #dbdfe5">第{{ form.pageIndex }}/{{ totalPage }}页</span>
        </div>
        <div class="right">

          <el-button
            class="btn_footer"
            size="small"
            :disabled="form.pageIndex >= totalPage"
            style="background-color: #d5ddf8"
            @click="setTablePage(1)"
          >下一页</el-button>
          <el-button
            class="btn_footer"
            size="small"
            style="background-color: #d5ddf8"
            :disabled="form.pageIndex === 1"
            @click="setTablePage(-1)"
          >上一页</el-button>

        </div>
      </div>

    </div>

    <!-- 弹窗 -->
    <el-dialog
      :title="publicTitle"
      :visible.sync="dialogVisible"
      width="40%"
      @onClose="onClose"
    >
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item
          label="商品类型名称："
          label-width="120px"
          prop="className"
        >
          <el-input
            v-model="formData.className"
            type="text"
            placeholder="请输入内容"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="margin-right: 150px">
        <el-button
          style="background-color: #fbf4f0 !important; border:none;margin-right:20px"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          style="
            background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
            color: #fff ;
            margin-right:90px;
            border:none
            "
          @click="submit"
        >确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getClassify, delClassify, addClassify, editClassify } from '@/api/shangping'
export default {
  name: 'Leixing',
  data() {
    return {
      page: 0,
      size: 10,
      publicType: 'add',
      dialogVisible: false,
      tableData: [],
      form: {
        className: null,
        pageIndex: 1, // 当前页
        pageSize: 10 // 每页条数
      },
      // index: null,
      classId: null,
      totalCount: null, // 总条数
      totalPage: null, // 页数
      rowId: null,
      formData: { className: '' },
      rules: {
        className: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    publicTitle() {
      if (this.publicType === 'add') { return '新增商品类型名称:' }
      if (this.publicType === 'edit') { return '修改商品类型名称:' } else { return 'add' }
    }
  },

  // 渲染列表
  async created() {
    this.rendering()
  },

  methods: {
    // 列表完成
    async rendering() {
      const data = await getClassify(this.form)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },
    // 序号排序
    indexMethod(index) {
      return index + this.form.pageSize * (this.form.pageIndex - 1) + 1
    },

    // 查询完成
    search() {
      this.rendering()
    },

    // 删除完成
    async del(id) {
      try {
        await delClassify({ id })
        this.$message.success('删除成功')
        this.rendering()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    // 新增/修改按钮
    async openPublic(type, row) {
      this.publicType = type
      if (this.publicType === 'edit') {
        this.classId = row.classId
        this.formData.className = row.className
      }
      this.dialogVisible = true
    },

    // 弹窗
    async submit() {
      try {
        this.$refs.form.validate()
        // 添加
        if (this.publicType === 'add') {
          await addClassify(this.formData)
        }
        this.$message.success('添加成功')
        this.rendering()
      } catch (error) {
        this.$message.error('添加失败')
      }
      try {
        // 修改
        if (this.publicType === 'edit') {
          await editClassify(this.classId, this.formData)
          this.$message.success('修改成功')
          this.rendering()
        }
      } catch (error) {
        this.$message.error('修改失败')
      }

      // 重置表单
      this.onClose()
    },

    // 弹窗里面的取消按钮
    onClose() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },

    // 分页
    setTablePage(value) {
      this.form.pageIndex += value
      this.rendering()
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
}
.header {
  height: 60px;
  padding: 10px 10px;
  background-color: #fff;
}
.body {
  margin-top: 20px;
  padding: 10px 10px;
  background-color: #fff;
}
.com_pagination {
 font-size: 16px;
 color: #dbdfe5 !important;
 padding: 20px 16px;
}
.btn_footer {
  margin-top: -20px;
float: right;
margin-left: 10px;
border: none;
}

</style>
